<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>uphgall. Подключение и инициализация</title>
<link rel="stylesheet" type="text/css" href="../css/reset.min.css">
<link rel="stylesheet" type="text/css" href="../css/prettify.css">
<link rel="stylesheet" type="text/css" href="../css/index.css">
<script type="text/javascript" src="../js/prettify/prettify.js"></script></head>

<body onload="prettyPrint()">
<div id="wrap">
<iframe width="100%" height="50" src="menu.html"></iframe>
<h2 id="setup">Подключение и инициализация галереи</h2>
<ol class="composite">
	<li>
		<strong>Подключите CSS и JavaScript</strong>
<pre class="prettyprint lang-html linenums">
&lt;head&gt;
	...
	&lt;link rel="stylesheet" type="text/css" href="css/uphgall.css"&gt;
	&lt;script type="text/javascript" src="js/jquery-1.7.2.min.js"&gt;&lt;/script&gt;
	&lt;script type="text/javascript" src="js/jquery.uphgall.js"&gt;&lt;/script&gt;
	...
&lt;/head&gt;
</pre>
		<ol>
			<li>Подключите готовый CSS галереи или создайте свой <em>(стр.3)</em></li>
			<li>Скачайте и подключите <a href="http://jquery.com/" target="_blank">jQuery</a> версии не ниже <strong>1.6</strong> <em>(стр.4)</em></li>
			<li>Скачайте <strong>uphgall</strong> со <a href="http://code.google.com/p/uphgall/downloads/list" target="_blank">страницы проекта</a> и подключите <em>(стр.5)</em></li>
		</ol>
	</li>
	<li>
		<strong>Создайте свой HTML каркас или используйте один из примеров</strong>
		<p>
		Создать собственный каркас совсем просто. С инструкциями можно ознакомиться в разделе <a href="usage.html">Использование</a>, или же взять за основу один из <a href="examples.html">примеров</a>.<br>В данном примере в галерею включено окно просмотра с переходом к следующему изображению по клику на нём.
		</p>
<pre class="prettyprint lang-html linenums">
&lt;body&gt;
	...
	&lt;div id="uphgall"&gt;
		&lt;div class="canvas navigation"&gt;
			&lt;img class="photo next"&gt;
		&lt;/div&gt;
	&lt;/div&gt;
	...
&lt;/body&gt;
</pre>
	</li>
	<li>
		<strong>Инициализируйте галерею с помощью представленной ниже функции</strong>
		<p>
		В примере в функцию инициализации передано минимальное количество параметров (на самом деле можно ещё меньше - ни одного). Полный список параметров с описаниями приведён в разделе <a href="usage.html">Использование</a>.
		</p>
<pre class="prettyprint lang-html linenums">
&lt;script type="text/javascript"&gt;
	uphgall({
		Query:	'cat'
	})
&lt;/script&gt;
</pre>
	</li>
</ol>

<h3>Всё! Галерея создана.</h3>
<p>
	Функциональность созданной галереи минимальна, но это для упрощения примера. На странице <a href="examples.html">примеров</a> доступны другие варианты для ознакомления.
</p>




<a class="next" href="usage.html"><span>>>></span>Использование</a>
</div><!--id=wrap-->
</body>
</html>